<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <link rel="stylesheet" href="<%= BASE_URL %>cdn/animate/3.5.2/animate.css">
    <title><%= webpackConfig.name %></title>
    <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
	  <style>
    html,
    body,
    html, body{
      background: #f1f1f1;
    }
    html,
    body,
    #app {
      height: 100%;
      margin: 0px;
      padding: 0px;
    }


    .Loading_title_cn {
      position: absolute;
      left: 50%;
      font-size: 3vh;
      font-family: 'YouSheBiaoTiHei';
      /* // font-family: 'Microsoft YaHei', sans-serif; */
      top: 56%;
      transform: translate(-50%, -50%);
      color: #ffffff9a;
    }

    .Loading_title_en {
      position: absolute;
      left: 50%;
      font-size: 2.0vh;
      font-family: 'YouSheBiaoTiHei';
      top: 60%;
      transform: translate(-50%, -50%);
      color: #ffffff9a;
    }

    .loaderbox {
      width: 80vw;
      height: 90vh;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -55%);

    }

    .Loading_box {
      width: 100%;
      height: 100%;
      position: relative;
      background-color: #212121;
      z-index: 9999;

      &--model {
        width: 100vw;
        height: 100vh;
        position: relative;
      }

      &--bar {
        position: absolute;
        /* // background-color: red; */
        width: 50%;
        height: 60px;
        bottom: 25vh;
        left: 50%;
        transform: translateX(-50%);
      }
    }

    /* From Uiverse.io by alexmaracinaru */
    .pyramid-loader {
      position: relative;
      width: 300px;
      height: 150px;
      display: block;
      transform-style: preserve-3d;
      transform: rotateX(-20deg);
    }

    .wrapper {
      position: relative;
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
      animation: spin 4s linear infinite;
    }

    @keyframes spin {
      100% {
        transform: rotateY(360deg);
      }
    }

    .pyramid-loader .wrapper .side {
      width: 70px;
      height: 70px;
      background: linear-gradient(to bottom right, #FFA500, #FF4500);
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      transform-origin: center top;
      clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    }

    .pyramid-loader .wrapper .side1 {
      transform: rotateZ(-30deg) rotateY(90deg);
      background: linear-gradient(to bottom right, #FF4500, #FFA500);
    }

    .pyramid-loader .wrapper .side2 {
      transform: rotateZ(30deg) rotateY(90deg);
      background: linear-gradient(to bottom right, #FFA500, #FF4500);
    }

    .pyramid-loader .wrapper .side3 {
      transform: rotateX(30deg);
      background: linear-gradient(to bottom right, #FFA500, #FF4500);
    }

    .pyramid-loader .wrapper .side4 {
      transform: rotateX(-30deg);
      background: linear-gradient(to bottom right, #FF4500, #FFA500);
    }

    .pyramid-loader .wrapper .shadow {
      width: 60px;
      height: 60px;
      background: #FF8C00;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      transform: rotateX(90deg) translateZ(-40px);
      filter: blur(12px);
    }
    .el-dialog__body{
      max-height: 75vh !important;
      overflow-x: hidden;
    }
    .el-dialog{
      width: 1200px !important;
    }
  </style>
  </head>
  <body>
    <div id="app">
      <div class="Loading_box">
        <div class='Loading_title_cn'>正在加载系统资源，请耐心等待</div>
        <div class='Loading_title_en'>Loading system resources, please be patient</div>
        <!-- <div class="Loading_box--model" ref="LoadingContainer"></div> -->
        <div class="loaderbox">
          <div class="pyramid-loader">
            <div class="wrapper">
              <span class="side side1"></span>
              <span class="side side2"></span>
              <span class="side side3"></span>
              <span class="side side4"></span>
              <span class="shadow"></span>
            </div>
          </div>
        </div>
      </div>
	</div>
  </body>
</html>
